<#include "../common/scripts.html">

<style>

    .border tbody tr td:nth-child(odd) {
        width: 140px;
    }

    .border tbody tr td:nth-child(even) {
        width: 200px;
    }

</style>
<div class="page-content detail-content page-content-main">
    <form action="" method="post" id="addForm" class="form-horizontal">
        <div class="fh-subtitle">基本信息</div>
        <table class="border" style="width:70%">
            <tr>
                <td><span class="required-flag">*</span>角色名称</td>
                <td style="position: relative;">
                    <input type="text" class="form-control-gx"
                           name="roleName" id="roleName" maxlength="50" autocomplete="off"/>
                </td>
                <td><span class="required-flag">*</span>角色编号</td>
                <td style="position: relative;">
                    <input type="text" class="form-control-gx"
                           name="roleCode" id="roleCode" maxlength="50" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td><span class="required-flag">*</span>所属应用系统</td>
                <td style="position: relative;text-align: left;" colspan="3">
                    <input type="hidden" name="applicationId" value="${application.id}" />
                    <input type="text" class="form-control-gx" readonly
                           name="applicationName" id="applicationName" value="${application.applicationName}" maxlength="50" autocomplete="off"/>
                </td>
            </tr>
        </table>
        <div class="fh-subtitle">授权功能菜单
            <span id="expandTrigger" class="btn btn-xs glyphicon glyphicon-collapse-down btn-deeporange" data-flag="0" onclick="triggerExpand(this)">展开</span>
        </div>
        <div style="width: 70%;background-color: #FAFAFA;">
         <div id="materialTree"  class="ztree">
         </div>
        </div>
    </form>

    <div class="text-center" style="width: 70%; margin-top: 20px;margin-bottom: 60px; ">
        <span class="model-btn" onclick="submit()" style="width:80px;">保存</span>
    </div>
</div>

<script type="text/javascript">
    var obj = '${trees}';
    var zNodes = JSON.parse(obj);
    var zTree;
    $(function() {
        $.fn.zTree.init($("#materialTree"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("materialTree");
    })
    var setting = {
        check: {
            enable: true
        },
        view: {
            selectedMulti: false, //是否允许多选
            showIcon: true,//设置 zTree 是否显示节点的图标。默认值：true
            showLine: true,//设置 zTree 是否显示节点之间的连线。默认值：true
            fontCss : {color:"#333"}
        },
        data: {
            simpleData: {
                enable: true,
               /* idKey: "id",
                pIdKey: "pid",
                rootPId: 0*/
            }
        },
        callback: {
            //zTree节点的点击事件
            onClick: function (e, treeId, treeNode, clickFlag) {
                zTree.checkNode(treeNode, !treeNode.checked, true);
            }
        }
    };

    function submit() {
        var zTreeObj = $.fn.zTree.getZTreeObj("materialTree");
        //获取复选框/单选框选中的节点
        var checkedNodes = zTreeObj.getCheckedNodes(true);
        const nodes = checkedNodes.map(item=>item.value);
        if($("#roleName").val()==""){
            sys.topmsg("角色名称不能为空");
            return;
        }

        if($("#roleCode").val()==""){
            sys.topmsg("角色编号不能为空");
            return;
        }

        if($("#applicationId").val()==""){
            sys.topmsg("请选择应用系统");
            return;
        }

        $.ajax({
            url : "${ctx}/role/saveRole",
            type : "POST",
            datatype : "json",
            data :$.param({'nodes':nodes.toString()})+'&'+$("#addForm").serialize(),
            success : function(data) {
                if (data.success) {
                    js.showMessage(data.message,"","success",1500)
                    js.closeCurrentTabPage(function(contentWindow){
                        contentWindow.reload();
                    });
                } else {
                    sys.topmsg(data.message);
                }
            },
            error : function(data) {
                js.showMessage("请求异常！","","error",1500)
            }
        });

    }

    function triggerExpand(obj) {
        var $this = $(obj);
        var zTreeObj = $.fn.zTree.getZTreeObj("materialTree");
        if($this.data("flag")=="0"){
            zTreeObj.expandAll(true);
            $this.data("flag","1");
            $this.html("折叠");
            $this.removeClass("glyphicon-collapse-down");
            $this.addClass("glyphicon-collapse-up");
        }else{
            zTreeObj.expandAll(false);
            $this.data("flag","0");
            $this.html("展开");
            $this.removeClass("glyphicon-collapse-up");
            $this.addClass("glyphicon-collapse-down");
        }

    }
</script>
